<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    computed 计算属性****
    1.可以计算的属性，写法是函数，使用当做属性
    2. 函数运算后的结果（return），就是计算属性的值
    3.多个值改变，影响一个结果的时候
    4.逻辑简单
    5.计算属性data里面，没有
    6.****计算有缓存
    7.大多数情况：多个值改变，影响一个结果的时候
    极少数情况：1个值变化，影响到多个结果
    <div id="app">
        <input type="text" v-model="firstName">
        +
        <input type="text" v-model="lastName">
        =
        <input type="text" v-model="fullName">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "李",
                lastName: "丽丽"
            },
            computed: {
                fullName() {//简写---get
                    return this.firstName + "--" + this.lastName;
                }
                // fullName:{//全写
                //     get(){
                //        return this.firstName+"--"+this.lastName;
                //     },
                //     set(newvalue){
                //       let arr=newvalue.split("--");
                //       this.firstName=arr[0];
                //       this.lastName=arr[1];
                //     }
                // }
            }
        })
    </script>
</body>

</html>